<template>
  <div class="v-editor-model-tree-select g-jc-sb">
    <div
      v-if="row.dataType === PropertyDataType.INSTANCE"
      class="is-disabled g-flex-1 g-pd-l-8"
    >
      {{ locale.getTByKey(selectedValue, selectedValue) }}
    </div>
    <div
      v-else-if="row.dataType === PropertyDataType.STRING"
      class="g-flex-1 g-jc-sb"
    >
      <el-input
        v-model="inputValue"
        class="g-one-line"
        :rows="1"
        :disabled="true"
        maxlength="20"
      ></el-input>
    </div>
    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Ref, computed, inject, ref } from "vue";
import { locale } from "@/util/locale";
import { ModelValue, PropertyRow } from "../../types";
import { modelDetail } from "@/modules/model/modals/modelDetail";
import { modelService } from "@/modules/model/service";
import { desensitize } from "@/util/common";
import { PropertyDataType } from "@/constants/Enums";
const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  encrypted?: boolean;
}>();

const inputValue = ref<string>(props.encrypted ? desensitize(props.row.value as string) : (props.row.value as string));

const selectedValue = computed(() => {
  const id = (props.row.value as ModelValue)?.id;
  if (id) {
    const name = (props.row.value as ModelValue).name || "";
    return locale.getTByKey("modelIdToName." + id, name);
  } else {
    const value = props.row.value as string;
    return locale.getTByKey("modelIdToName." + value, value);
  }
});

const handleClick = async () => {
  let profileRootModelId = "";
  if (app.activeProject?.config) {
    profileRootModelId = app.global.profileEditProjectIdMapModel.profileNameToProfileModelIdMap.get(
      app.activeProject?.config?.profileName
    ) as string;
  }
  const modelInfo = await modelService.getModelData(app.activeProject!.id, props.row.modelId);
  modelDetail.popup({ projectId: app.activeProject!.id, modelId: modelInfo.ownerId, activeKey: "numberPart", profileRootModelId });
};
</script>

<style lang="scss" scoped>
.is-disabled {
  background: #f5f7fa;
  color: #ababb2;
  cursor: not-allowed;
}
</style>
